<template>
  <div class="loginContainer">
    <div class="title">
      <h3>注册</h3>
    </div>
    <el-form class="elform" ref="formRef" :rules="rules" :model="form">
      <el-form-item class="elformitem" prop="ttc">
        <el-input
          v-model="form.ttc"
          class="xinput"
          size="large"
          placeholder="请输入租户号"
          :prefix-icon="House"
        />
      </el-form-item>
      <el-form-item class="elformitem" prop="username">
        <el-input
          v-model="form.username"
          class="xinput"
          size="large"
          placeholder="请输入邮箱"
          :prefix-icon="User"
        />
      </el-form-item>
      <el-form-item class="elformitem" prop="nickname">
        <el-input
          v-model="form.nickname"
          
          class="xinput"
          size="large"
          placeholder="请输入昵称"
          :prefix-icon="MoreFilled"
        />
      </el-form-item>
      <el-form-item class="elformitem elformpassword" prop="password">
        <el-input
          v-model="form.password"
          class="xinput"
          size="large"
          type="password"
          placeholder="请输入密码"
          :prefix-icon="Lock"
          show-password
        />
      </el-form-item>
      <el-form-item class="elformitem elformlicense">
        <div class="license">
            <div>
              <el-checkbox v-model="form.isAgree" label="" size="large" />
            </div>
            <div class="text">
              我已阅读并同意 <span class="link" @click="showPrivacyType='protocal';showPrivacy=true;">《用户协议》</span>和<span class="link" @click="showPrivacyType='privacy';showPrivacy=true;">《隐私政策》</span>。
            </div>
        </div>
      </el-form-item>
      <el-form-item class="elformitem">
        <el-button type="primary" class="btnLogin" @click="onClickReg(formRef)">注册</el-button>
      </el-form-item>
      <el-form-item class="elformitem">
        <el-button  class="btnReg" @click="onClickGotoLogin">返回登录</el-button>
      </el-form-item>
      
    </el-form>
    <div class="privacyModel" v-if="showPrivacy">
      <div style="position: relative; height: 0px;">
        <div class="closePrivacyModel" @click="showPrivacy=false; showPrivacyType='';">关闭</div>
      </div>
      
      <MarkDown  v-model:path="showPrivacyType" ></MarkDown>
    </div>

    <div class="ttc">
      
    </div>
    <div class="username"></div>
    <div class="password"></div>
    <div class="button"></div>
  </div>

</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from "vue-router"
import { User, Lock, House, MoreFilled } from '@element-plus/icons-vue'
import userApi from '../../apis/user';
import { FormValid } from '../../utils/FormUtils'
import CryptoJS from 'crypto-js'
import MarkDown from '../Common/MarkDown.vue';

const router = useRouter();

const formRef = ref<FormInstance>()
const form = ref({
  username: "",
  ttc: "",
  password: "",
  nickname:"",
  isAgree:false
})
const showPrivacyType = ref("privacy");
const showPrivacy = ref(false);

const rules = reactive<FormRules>({
  ttc: [
    { required: true, message: '请输入租户号', trigger: 'blur' },
    { min: 3, max: 16, message: '最小长度3, 最大长度16', trigger: 'blur' },
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 32, message: '最小长度3, 最大长度16', trigger: 'blur' },
  ],
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 3, max: 16, message: '最小长度3, 最大长度16', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '最小长度6, 最大长度16', trigger: 'blur' },
  ]
})
const onClickReg = (formRef: FormInstance | undefined)=>{
  console.log("onClickReg");
  const reqData = form.value;
  if(!reqData.isAgree){
    ElMessage({
        type: 'warning',
        message: "请先阅读并同意《用户协议》和《隐私政策》",
    })
    return;
  }
  let hash = CryptoJS.SHA256(reqData.password);
  const password = hash.toString(CryptoJS.enc.Base64)
  if (!formRef) return;

  FormValid(formRef).then(ret=>{
    const reqData = form.value;
    return userApi.register(reqData.username, password, reqData.ttc, reqData.nickname);
  }).then(ret=>{
    console.log('[Register]register', ret);
    alert('注册成功');
    router.replace('/login');
  })
  .catch(err=>{
    console.log('[Register]err', err);
    alert('注册失败,' + err.message);
  })
  
}

const onClickGotoLogin = () => {
  router.replace('/login');
}


</script>



<style scoped>
.loginContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  left: 0;
  top: 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
}
.title {
  color: white;
  font-size: 26px;
  color: #eee;
  margin: 0 auto 20px auto;
  text-align: center;
  font-weight: 700;
  margin-top: 140px;
}

.xinput {
  width: 450px;
  height: 54px;
}

.elform{
  width: 520px;
  padding: 0 35px 0;
  
}
.elformitem {
  margin-bottom: 22px;
  
}

.btnLogin, .btnReg {
  width: 450px;
  height: 40px;
}
</style>
<style >
.elformitem > div{
  justify-content: center;
}
.xinput .el-input__wrapper{
  background-color: #2b3442;
  border: 1px solid hsla(0,0%,100%,.1);
  background: rgba(0,0,0,.1);
  border-radius: 5px;
  color: #454545;
  box-shadow:none
}
.xinput .el-input__inner {
  color: white;
}

.elform .el-form-item__error{
  margin-left: 35px;
}

.elformpassword, .elformlicense{
  margin-bottom: 10px !important;
}

.license {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 450px;
  
}
.license .text{
    margin-left: 5px;
    color: white;
    margin-top: 1px;
}
.link {
  cursor: pointer;
}
.privacyModel {
  background-color: white;
  position: absolute;
  width: 70%;
  height: 80%;
  z-index: 100;
  top: 50px;
  overflow: scroll;
}
.closePrivacyModel{
  color: #5a9ef8;
  position: fixed;
  z-index: 101;
  top: 60px;
  right: calc(15% + 10px);
  cursor: pointer;

}
</style>
